<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="进度条类型">
                <el-radio-group v-model="propJson.type">
                    <el-radio label="line">条形</el-radio>
                    <el-radio label="circle">圆形</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="圆形宽度" v-if="propJson.type === 'circle'">
                <el-input-number v-model="propJson.width" :min="1"/>
            </el-form-item>

            <el-form-item label="进度条粗度">
                <el-input-number v-model="propJson.strokeWidth" :min="1"/>
            </el-form-item>

            <el-form-item label="是否展示进度条文字">
                <el-radio-group v-model="propJson.isShowText">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="文字是否展示在进度条内部" v-if="propJson.type === 'line' && propJson.isShowText">
                <el-radio-group v-model="propJson.isTextInside">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否添加进度条条纹" v-if="propJson.type === 'line'">
                <el-radio-group v-model="propJson.isStriped">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="进度条条纹是否运动" v-if="propJson.type === 'line' && propJson.isStriped">
                <el-radio-group v-model="propJson.stripedFlow">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否开启动画滚动" v-if="propJson.type === 'line'">
                <el-radio-group v-model="propJson.isIndeterminate">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="动画运动速度" v-if="propJson.type === 'line'">
                <el-input-number v-model="propJson.duration" :min="1"/>
            </el-form-item>

            <el-divider>百分比值设置</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.actionInfo ? propJson.actionInfo : {}" :commonParam="commonParam" />
        </el-form>
    </div>
</template>

<script name="PercentageDrawer" setup lang="ts">
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue.vue"
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

</script>

<style scoped lang="less">

</style>